 #check_in {
   width: 440px;
   height: 630px;
   text-align: center;
   margin-top: 50px;
   margin: auto;
 }

 #check_in .img-wrap {
   height: 158px;
   width: 360px;
   margin: 0 auto;
   background: url(../../images/check_in_img.png) no-repeat;
   background-size: 100% auto;
   color: #9b7b37;
   position: relative
 }

 #check_in .img-wrap .start-gif {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: url(../../images/check_in_start.gif) no-repeat;
   background-size: cover;
   display: none
 }

 #check_in .img-wrap .loading-gif {
   position: absolute;
   background: url(../../images/check_in_loading.png) no-repeat;
   width: 40px;
   height: 40px;
   background-size: cover;
   top: 34%;
   left: 50%;
   margin-left: -20px;
   opacity: 0
 }

 #check_in .img-wrap .text-wrap {
   display: none;
   margin-top: 48px
 }

 #check_in .img-wrap .text-wrap .checked-in {
   font-size: 22px;
   border-bottom: 2px solid #9b7b37;
   display: inline-block
 }

 #check_in .img-wrap .text-wrap .continuous-check-in {
   font-size: 12px;
   margin-bottom: 0;
   line-height: 22px
 }

 #check_in .calendar-wrap {
   background: url(../../images/check_in_calendar.png) no-repeat 50%;
   height: 380px;
   width: 360px;
   margin: 0 auto;
   background-size: cover
 }

 #check_in .calendar-wrap .list-wrap {
   opacity: 0
 }

 #check_in .calendar-wrap .list-wrap .list {
   padding-top: 32px;
   padding-left: 0;
   color: #a6a6a6;
   font-size: 9px;
   margin-bottom: 0;
   font-size: 0
 }

 #check_in .calendar-wrap .list-wrap .list .list-item {
   display: inline-block;
   margin: 0 8px
 }

 #check_in .calendar-wrap .list-wrap .list .list-item.current-day .icon {
   background-color: #ff736e
 }

 #check_in .calendar-wrap .list-wrap .list .list-item.before-day .icon {
   background-color: #ffd41a
 }

 #check_in .calendar-wrap .list-wrap .list .list-item.after-day .icon {
   color: #ffa5a1;
   border: 1px solid #ff8f6f;
   background-color: #fff
 }

 #check_in .calendar-wrap .list-wrap .list .list-item .icon {
   width: 30px;
   height: 30px;
   line-height: 30px;
   border-radius: 50%;
   display: inline-block;
   margin: 6px 0;
   color: #fff;
   font-size: 14px
 }

 #check_in .calendar-wrap .list-wrap .list .list-item .icon.last {
   width: 40px;
   height: 40px;
   margin: 0;
   border: 1px solid #ff8f6f;
   background: #fff url(https://img.okay.do/acagrid/static/release/src/images/check_in_bill_pink.png) no-repeat 50%;
   background-size: 76%
 }

 #check_in .calendar-wrap .list-wrap .list .list-item .text {
   display: block;
   font-size: 9px
 }

 #check_in .calendar-wrap .list-wrap .list .list-item:nth-child(2n) .icon {
   position: relative
 }

 #check_in .calendar-wrap .list-wrap .list .list-item:nth-child(2n) .icon:after, #check_in_wrap #check_in .calendar-wrap .list-wrap .list .list-item:nth-child(2n) .icon:before {
   content: "";
   display: block;
   width: 20px;
   height: 1px;
   background-color: #ffd41a;
   top: 50%;
   z-index: -1
 }

 #check_in .calendar-wrap .list-wrap .list .list-item:nth-child(2n) .icon:after {
   position: absolute;
   left: -20px
 }

 #check_in .calendar-wrap .list-wrap .list .list-item:nth-child(2n) .icon:before {
   position: absolute;
   right: -20px
 }

 #check_in .calendar-wrap .list-wrap .list.seven-days .icon.last {
   background-color: #ff736e;
   background-image: url(https://img.okay.do/acagrid/static/release/src/images/check_in_bill_white.png);
   position: relative
 }

 #check_in .calendar-wrap .list-wrap .list.seven-days .icon.last:before {
   content: "";
   display: block;
   position: absolute;
   width: 12px;
   height: 12px;
   background-color: red;
   border-radius: 50%;
   border: 2px solid #fff;
   right: 0
 }

 #check_in .calendar-wrap .list-wrap .message {
   font-size: 10px;
   color: #ff736e;
   text-align: left;
   margin: 2px 0 0 20px
 }

 #check_in .calendar-wrap .time {
   font-size: 14px;
   color: #777;
   margin: 16px 30px 12px;
   padding-bottom: 8px;
   border-bottom: 1px solid #f3f3f3
 }

 #check_in .calendar-wrap .calendar-table {
   font-size: 14px;
   color: #8c8c8c;
   width: 90%;
   margin-left: 5%
 }

 #check_in .calendar-wrap .calendar-table tr {
   line-height: 30px
 }

 #check_in .calendar-wrap .calendar-table tr td.past {
   opacity: .3
 }

 #check_in .calendar-wrap .calendar-table tr td.checked-in-already.zoomIn {
   background: url(https://img.okay.do/acagrid/static/release/src/images/check_in_mark.png) no-repeat 50%;
   background-size: 24px 24px;
   color: transparent;
   opacity: 1
 }

 #check_in .share-wrap {
   display: none
 }

 #check_in .share-wrap .btn.share {
   width: 115px;
   height: 38px;
   margin: 19px auto 8px
 }

 #check_in .check-in-close {
   font-size: 14px;
   position: absolute;
   padding: 10px;
   top: 0;
   right: 0;
   color: inherit;
   opacity: 1
 }

 #check_in .check-in-close:hover {
   opacity: .5
 }

 body.cache td.checked-in-already {
   background: url(https://img.okay.do/acagrid/static/release/src/images/check_in_mark.png) no-repeat 50%;
   background-size: 24px 24px;
   color: transparent;
   opacity: 1!important
 }

 .animated {
   -webkit-animation-duration: .5s;
   animation-duration: .5s;
   animation-timing-function: ease-in;
   -webkit-animation-timing-function: ease-in;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both
 }

 .animated.img-wrap {
   -webkit-animation-duration: .4s;
   animation-duration: .4s;
   animation-delay: -.1s;
   -webkit-animation-delay: -.1s
 }

 .animated.calendar-wrap {
   animation-delay: -.2s;
   -webkit-animation-delay: -.2s
 }

 .animated.roll-circle {
   -webkit-animation-duration: .8s;
   animation-duration: .8s;
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite;
   animation-timing-function: linear;
   -webkit-animation-timing-function: linear
 }

 .checked-in-already.animated, .list-wrap.animated {
   animation-delay: 0s;
   -webkit-animation-delay: 0s
 }

 .checked-in-already.animated {
   -webkit-animation-duration: .4s;
   animation-duration: .4s
 }

 .shake.animated {
   animation-iteration-count: infinite;
   -webkit-animation-iteration-count: infinite
 }

 @-webkit-keyframes fadeInUp {
   0% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0)
   }
   to {
     opacity: 1;
     -webkit-transform: none;
     transform: none
   }
 }

 @keyframes fadeInUp {
   0% {
     opacity: 0;
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0)
   }
   to {
     opacity: 1;
     -webkit-transform: none;
     transform: none
   }
 }

 .fadeInUp {
   -webkit-animation-name: fadeInUp;
   animation-name: fadeInUp
 }

 @-webkit-keyframes zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(.3, .3, .3);
     transform: scale3d(.3, .3, .3)
   }
   50% {
     opacity: 1
   }
 }

 @keyframes zoomIn {
   0% {
     opacity: 0;
     -webkit-transform: scale3d(.3, .3, .3);
     transform: scale3d(.3, .3, .3)
   }
   50% {
     opacity: 1
   }
 }

 .zoomIn {
   -webkit-animation-name: zoomIn;
   animation-name: zoomIn
 }

 @-webkit-keyframes rollCircle {
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg)
   }
   to {
     -webkit-transform: rotate(1turn);
     transform: rotate(1turn);
     -ms-transform: rotate(1turn)
   }
 }

 @keyframes rollCircle {
   0% {
     transform: rotate(0deg);
     -webkit-transform: rotate(0deg);
     -ms-transform: rotate(0deg)
   }
   to {
     -webkit-transform: rotate(1turn);
     transform: rotate(1turn);
     -ms-transform: rotate(1turn)
   }
 }

 .roll-circle {
   -webkit-animation-name: rollCircle;
   animation-name: rollCircle
 }

 @-webkit-keyframes fadeInUpShort {
   0% {
     opacity: 0;
     -webkit-transform: translate3d(0, 50%, 0);
     transform: translate3d(0, 50%, 0)
   }
   80% {
     opacity: 0
   }
   to {
     opacity: 1;
     -webkit-transform: none;
     transform: none
   }
 }

 @keyframes fadeInUpShort {
   0% {
     opacity: 0;
     -webkit-transform: translate3d(0, 50%, 0);
     transform: translate3d(0, 50%, 0)
   }
   80% {
     opacity: 0
   }
   to {
     opacity: 1;
     -webkit-transform: none;
     transform: none
   }
 }

 .fadeInUpShort {
   -webkit-animation-name: fadeInUpShort;
   animation-name: fadeInUpShort
 }

 @-webkit-keyframes slideInUp {
   0% {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     visibility: visible
   }
   to {
     -webkit-transform: translateZ(0);
     transform: translateZ(0)
   }
 }

 @keyframes slideInUp {
   0% {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0);
     visibility: visible
   }
   to {
     -webkit-transform: translateZ(0);
     transform: translateZ(0)
   }
 }

 .slideInUp {
   -webkit-animation-name: slideInUp;
   animation-name: slideInUp
 }

 @-webkit-keyframes shake {
   0% {
     -webkit-transform: translate3d(0, 100%, 0);
     transform: translate3d(0, 100%, 0)
   }
   to {
     -webkit-transform: translateZ(0);
     transform: translateZ(0)
   }
 }

 @keyframes shake {
   10%, 50%, 90% {
     -webkit-transform: rotate(7deg);
     transform: rotate(7deg);
     -webkit-transform-origin: center center;
     transform-origin: center center
   }
   20%, 60%, to {
     -webkit-transform: rotate(-7deg);
     transform: rotate(-7deg);
     -webkit-transform-origin: center center;
     transform-origin: center center
   }
 }

 .shake {
   -webkit-animation-name: shake;
   animation-name: shake
 }

 #share_wrap #share {
   height: 479px;
   width: 377px;
   margin-left: -188.5px;
   margin-top: -239.5px
 }

 #share_wrap #share .qrcode-wrap {
   margin: 43px auto 32px;
   width: 152px;
   height: 152px;
   border: 1px solid #e4e4e4
 }

 #share_wrap #share .qrcode-wrap .qrcode {
   display: inline-block;
   margin: 12px;
   height: 128px;
   width: 128px;
   background-image: url(https://img.okay.do/acagrid/static/release/src/images/index_android_qrcode.png);
   background-size: 100% 100%
 }

 #share_wrap #share .btn.ok {
   width: 115px;
   height: 38px;
   margin: 31px auto 24px
 }

 .user {
   border-right: 1px solid #f3f3f3;
   border-left: 1px solid #f3f3f3;
 }
